<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="cn.net.ecode.common.utils.CookieUtils"%>
<%CookieUtils.setCookie(response, "style_color", "light2"); %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta content="width=device-width, initial-scale=1" name="viewport"/>
	<meta content="${fns:getConfig('productName')}" name="description"/>
	<meta content="http://www.ecode.net.cn" name="author"/>
    <title>${title}${not empty title ? ' - ' : ''}${fns:getConfig('productName')}</title>
    <link href="${ctxStaticTheme}/lib/js/layout-default-latest.css" rel="stylesheet" type="text/css" />
    <link href="${ctxStaticTheme}/lib/js/themes/mycustomer/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="${ctxStaticTheme}/lib/js/wdScrollTab/css/TabPanel.css" rel="stylesheet" type="text/css" />    
    <link href="${ctxStaticTheme}/lib/css/main.css" rel="stylesheet" type="text/css" />

    <script src="${ctxStaticTheme}/lib/js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/jquery.layout-latest.min.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/jquery.layout.resizePaneAccordions-latest.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/jquery.layout.resizeTabLayout-latest.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>

    <script src="${ctxStaticTheme}/lib/js/wdScrollTab/src/Plugins/Fader.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/wdScrollTab/src/Plugins/TabPanel.js" type="text/javascript"></script>
    <script src="${ctxStaticTheme}/lib/js/wdScrollTab/src/Plugins/Math.uuid.js" type="text/javascript"></script>
    
	<link href="${ctxStatic}/jquery-toastr/2.0/toastr.min.css" rel="stylesheet" type="text/css"/>
	<script src="${ctxStatic}/jquery-toastr/2.0/toastr.min.js" type="text/javascript"></script>
	
	<!-- <link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.css" rel="stylesheet" type="text/css"/>
	<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.js" type="text/javascript"></script> -->
	
	<script src="${ctxStatic}/common/jeesite.min.js?${_version}" type="text/javascript"></script>
	
    <script type="text/javascript">
        var tabpanel;

        function resizePageLayout() {           
            tabpanel.resize();
        };

        var layoutOptions = {
//             east__childOptions: {
//                 inset: {
//                     top: 0
// 			        , bottom: 0
// 			        , left: 0
// 			        , right: 0
//                 },
//                 north__closable: false,
//                 north__resizable: false,
//                 north__size: 150,
//                 south__closable: false,
//                 south__resizable: false,
//                 south__size: 200
//             },

            west__childOptions: {
                inset: {
                    top: 0
			        , bottom: 0
			        , left: 0
			        , right: 0
                },
                north__closable: false,
                north__resizable: false,
                north__size: 28,
                north__spacing_open: 0, //边框的间隙 
                south__closable: false,
                south__resizable: false,
                south__size: 60,
                center__onresize: $.layout.callbacks.resizePaneAccordions
            },
            north__closable: false,
            north__resizable: false,
            north__size: 50,
            north__spacing_open: 5, //边框的间隙            
            west__resizable: false,
            west__size: 200,
//             east__resizable: false,
//             east__size: 200,
//             east__initClosed:true, // 默认隐藏东边窗口
            togglerTip_open: "隐藏",
            togglerTip_closed: "显示",
            center__minWidth: 580,
            center__minHeight: 400,
            center__onresize: $.layout.callbacks.resizeTabLayout,
            west__minWidth: 200,
            west__minHeight: 400,
//             east__minWidth: 200,
//             east__minHeight: 400,
            west__onopen: resizePageLayout,
//             east__onopen: resizePageLayout,
            west__onclose: resizePageLayout,
//             east__onclose: resizePageLayout
        };

        $(document).ready(function () {
        	// 初始化布局
            $('body').layout(layoutOptions);
        	// 初始化菜单
            $("#accordion").accordion({
                heightStyle: "fill"
            });
        	$(".sub-menu ul").each(function(){
        		if ($(this).children().length == 0){
        			$(this).remove();
        		}else{
        			$(this).prev().click(function(){
        				return false;
        			});
        		}
        	});
            $(".sub-menu").menu({
            	collapse: function(){
            		alert(1);
            	},
                heightStyle: "fill"
            });
            // 初始化页签
            tabpanel = new TabPanel({
                renderTo: 'WorkTabs',
                autoResizable: true,
                border: 'none',
                active: 0,
                items: [
                    { id: 'tabFirst', title: '首页', html: '<iframe src="" width="100%" height="100%" frameborder="0"></iframe>', closable: false }
                ]
            });
            // 绑定菜单按钮事件
            $('#accordion').on('click', 'a.addTab', function (e) {
            	$('#accordion a.addTab').removeClass('ui-state-active2');
            	$(this).addClass('ui-state-active2');
            	addTabPage($(this), $.trim($(this).text()), $(this).attr("href"));
        		window.location.hash = $(this).attr("href").replace('#', '');
            	return false;
            });
         	// 绑定hash更改事件，刷新打开指定页面的页签。
    	    $(window).bind("hashchange", function(e) {
    	    	var hash = window.location.hash.replace('#', '');
    	    	var addTab = $('a[href="' + hash + '"]:eq(0)');
    	        if (hash && hash != '' && addTab && addTab.length > 0){
    	        	addTab.click();
    	        }else{
    	    		//$('.page-sidebar-menu .sub-menu .addTab :eq(0)').click(); // 默认展开第一个菜单
    	        }
    	    }).trigger("hashchange");
         	
         	// 在线人数统计
         	var onlineCount = function(){
         		$.get('${ctxPath}/onlineCount', function(data){
            	    $('#onlineCount').text(data);
             	});
         	}
         	setInterval(onlineCount, 1000 * 60 * 3);
         	onlineCount();
         	
    		// 初始密码提示
    		if ('${isInitPassword}' == 'true'){
    			alertx("您的密码还是初始密码，请修改密码！", function(){
    				$('#modifyPassword').click();
    			});
    		}
        });

        /**
         * 添加TAB页面
         * @param $this 		点击的对象
         * @param title 		提示标题
         * @param url   		访问的路径
         * @param parentTabPageId 来源页面ID
         * @param closeable	 	是否有关闭按钮
         * @param refresh 		打开后是否刷新重新加载
         */
        function addTabPage($this, title, url, parentTabPageId, closeable, refresh){
        	var tabId = $this.data('tabId');
        	tabId = tabId == undefined ? 'tabpanel-' + Math.uuid() : tabId;
        	$this.attr('data-tab-id', tabId);
            tabpanel.addTab({
                id: tabId,
                title: title,
                html: '<iframe id="'+tabId+'-frame" src="' + url + '" width="100%" height="100%" frameborder="0"></iframe>',
                closable: (closeable == undefined ? true : closeable),
                disabled: false
            });
        }

        /**
         * 关闭当前TAB页面，并激活上级页面
         * @param parentTabPageId 上级界面ID
         * @param callback(contents, contentWindow)	关闭时的回调方法，传入上级页面的contents和contentWindow
         */
        function closeCurrentTabPage(parentTabPageId, preTabCallback){
        	var actTab = tabpanel.getActiveTab();
        	var preTabId = actTab.preTabId + '-frame';
        	if (preTabId && preTabId != ''){
        		var contents = top.$("#"+preTabId).contents();
        		var contentWindow = top.$("#"+preTabId)[0].contentWindow;
        		if (typeof preTabCallback == 'function'){
        			preTabCallback(contents, contentWindow);
        		}
        	}
            tabpanel.kill(actTab.id);
        }
	</script>
</head>
<body>
<div id="divTopTitle" class="ui-layout-north container mainHeader">  
    <div id="Div4" class="logo">
        <div class="tags_button" align="right">
            <span class="logo-f">${fns:getConfig('productName')}</span>
            <a href="${ctx}/sys/user/info?qtype=0" class="user" onclick="addTabPage($(this), '个人信息', $(this).attr('href'));return false;">当前用户：${fns:getUser().userName} </a>
            <a href="#" class="msg">在线 <span id="onlineCount">0</span> 人</a>
            <a href="${ctx}/logout" class="exit">退出 </a>
            <a href="#" class="help">帮助</a>
        </div>
    </div>
</div>
<div id="divWorkCenter" class="ui-layout-center containerCenter">
    <div id="WorkTabs"></div>
</div>
<!-- <div id="divRight" class="ui-layout-east container"> -->
<!--     <div class="ui-layout-north containerRegion"> -->
<!--         <div id="Div1" class="block lite"> 统计信息 </div> -->
<!--     </div> -->
<!-- 	<div class="ui-layout-center containerRegion"> -->
<!--         <div id="Div2" class="block lite"> 功能导航 </div>        -->
<!--     </div>	 -->
<!-- 	<div class="ui-layout-south containerRegion"> -->
<!--         <div id="Div3" class="block lite"> 常用功能 </div> -->
<!--     </div> -->
<!-- </div> -->
<div id="divLeft" class="ui-layout-west container">
    <div class="ui-layout-north container naviTitle">功能导航</div>
	<div class="ui-layout-center container" >         
        <div id="accordion">
       		<c:set var="menuList" value="${fns:getMenuList()}"/>
			<c:forEach items="${menuList}" var="menu" varStatus="idxStatus">
				<c:if test="${menu.isMenu && menu.parentCode eq '0' && menu.isShow eq '1'}">
					<h3><%-- <a href="${fn:indexOf(menu.href, '://') eq -1 ? ctx : ''}${not empty menu.href ? menu.href : '/blank'}"
							target="${not empty menu.target ? menu.target : 'mainFrame'}" class="addTab" style="color:${menu.color}"> --%>
						<i class="icon ${not empty menu.icon ? menu.icon : 'icon-arrow-right'}" style="color:${menu.color}"></i>
						<span class="title">${menu.name}</span>
					<%-- </a> --%></h3>
					
					<!-- TOW LEVEL MENU -->
					<div><ul class="sub-menu">
						<c:forEach items="${menuList}" var="menu2">
							<c:if test="${menu2.isMenu && menu2.parentCode eq menu.menuCode && menu2.isShow eq '1'}">
								<li>
									<a href="${fn:indexOf(menu2.href, '://') eq -1 ? ctx : ''}${not empty menu2.href ? menu2.href : '/blank'}" 
										target="${not empty menu2.target ? menu2.target : 'mainFrame'}" class="addTab" style="color:${menu2.color}">
										<i class="icon ${not empty menu2.icon ? menu2.icon : 'icon-arrow-right'}" style="color:${menu2.color}"></i>
										<span class="ui-icon ui-icon-play"></span>${menu2.name}</a>
										
										<!-- THREE LEVEL MENU -->
										<ul class="sub-menu-2">
											<c:forEach items="${menuList}" var="menu3">
												<c:if test="${menu3.isMenu && menu3.parentCode eq menu2.menuCode && menu3.isShow eq '1'}">
													<li>
														<a href="${fn:indexOf(menu3.href, '://') eq -1 ? ctx : ''}${not empty menu3.href ? menu3.href : '/blank'}" 
															target="${not empty menu3.target ? menu3.target : 'mainFrame'}" class="addTab" style="color:${menu3.color}">
															<i class="icon ${not empty menu3.icon ? menu3.icon : 'icon-arrow-right'}" style="color:${menu3.color}"></i>
															<span class="ui-icon ui-icon-play"></span>${menu3.name}</a>
															
															<!-- FOUR LEVEL MENU -->
															<ul class="sub-menu-3">
																<c:forEach items="${menuList}" var="menu4">
																	<c:if test="${menu4.isMenu && menu4.parentCode eq menu3.menuCode && menu4.isShow eq '1'}">
																		<li>
																			<a href="${fn:indexOf(menu4.href, '://') eq -1 ? ctx : ''}${not empty menu4.href ? menu4.href : '/blank'}" 
																				target="${not empty menu4.target ? menu4.target : 'mainFrame'}" class="addTab" style="color:${menu4.color}">
																			<i class="icon ${not empty menu4.icon ? menu4.icon : 'icon-arrow-right'}" style="color:${menu4.color}"></i>
																			<span class="ui-icon ui-icon-play"></span>${menu4.name}</a>
																		</li>
																	</c:if>
																</c:forEach>
															</ul>
															<!-- END FOUR LEVEL MENU -->
														
													</li>
												</c:if>
											</c:forEach>
										</ul>
										<!-- END THREE LEVEL MENU -->
									
								</li>
							</c:if>
						</c:forEach>
					</ul></div>
					<!-- END TOW LEVEL MENU -->
					
				</c:if>
			</c:forEach>
        </div>
    </div>
	<div class="ui-layout-south lite text-shadow">
        <div></div>
    </div>	
</div>
</body>
</html>